<template>
  <div class="login">
    <video
      src="../../../public/img/bg_video.d2d602a9.mp4"
      autoplay
      loop
      reload="auto"
    ></video>
    <div class="login_content">
      <div class="btn_pay"></div>
      <h2 class="title">小吴的管理系统</h2>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="username"
            v-model="loginForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.number="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/index";
import { mapMutations } from "vuex"
export default {
  data() {
    //用户信息的校验
    var validateusername = (rule, value, callback) => {
      var exp = /^[\u4e00-\u9fa5\w]{1,6}$/;
      if (!exp.test(value)) {
        callback(new Error("请输入1-6位的汉字、英文、数字、下划线"));
      } else {
        callback();
      }
    };
    //用户密码的校验
    var checkPwd = (rule, value, callback) => {
      var exp1 = /^(\w){3,20}$/;
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else if (!exp1.test(value)) {
        return callback(new Error("只能输入6-20个字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateusername, trigger: "blur" }],
        password: [{ validator: checkPwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapMutations(["SET_USERINFO"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //代表本地校验通过
          //打开登入加载动画
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          let { username, password } = this.loginForm;
          login(username, password)
            .then((res) => {
              //服务器响应，关闭loading动画
              setTimeout(() => {
                loading.close();
              }, 1000);

              console.log(res);
              if (res.data.state) {
                //弹出登录成功提示框
                this.$message.success("登录成功");

                //用户名和密码正确
                localStorage.setItem("ajaj-token", res.data.token);
                localStorage.setItem("ajaj-userInfo",JSON.stringify(res.data.userInfo));

                //更改vuex中state['userInfo']的值
                this.SET_USERINFO(res.data.userInfo)

                //跳转页面
                this.$router.push("/");
              } else {
                loading.close();
                //用户名或者密码错误
                this.$message.error("用户名密码错误");
              }
            })
            .catch((err) => {
              console.log("请求失败");
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
